<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  width: {
    type: Number,
    default: 927
  },
  height: {
    type: Number,
    default: 360
  },
  data: {
    type: Array,
    default: () => []
  }
})
let chartData = {
  yAxisData: props.data[0],
  data: props.data[1].map((item, index) => {
    return {
      value: item,
      itemStyle: {
        color:
          index === 1
            ? {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: `rgba(0, 126, 255, .6)`
                  },
                  {
                    offset: 1,
                    color: `rgba(0, 152, 179, .6)`
                  }
                ]
              }
            : `rgba(155, 164, 187, 1)`
      }
    }
  })
}

const option = {
  grid: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    // 设置true 会导致 变小图表 y有文字
    containLabel: true
  },
  // X轴配置：保留数值和轴线，隐藏刻度线
  xAxis: [
    {
      show: true,
      type: 'value',
      // X轴轴线（保留）
      axisLine: {
        show: true,
        lineStyle: {
          color: `rgb(${chartData.color})`,
          width: 2
        }
      },
      // X轴刻度线（关键：隐藏刻度线）
      axisTick: {
        show: false, // 从true改为false，去掉刻度线
        alignWithLabel: true, // 即使隐藏，保持与标签的对齐逻辑（避免样式偏移）
        lineStyle: {
          color: `rgb(${chartData.color})`,
          width: 2,
          length: 8
        }
      },
      // X轴刻度文字（保留数值）
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgb(183,227,252)',
          fontSize: '16rem',
          FontFacet: 'dt'
        }
      },
      // X轴网格线（保留）
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(17, 69, 111, 0.8)',
          width: 1
        }
      },
      min: 0
    }
  ],
  // Y轴完全隐藏
  yAxis: [
    {
      show: false,
      type: 'category',
      data: chartData.yAxisData,
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgb(183,227,252)',
          fontSize: '0rem',
          FontFacet: 'dt'
        }
      }
    }
  ],
  tooltip: {
    show: true
  },
  series: [
    {
      name: '',
      type: 'bar',
      zlevel: 2,
      barWidth: '14rem',
      label: {
        show: false // 已隐藏柱子上的数字
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgb(22,60,95)'
      },
      data: chartData.data
    }
  ]
}
const echart = ref()

onMounted(() => {
  console.log(echart.value)
  const e = echarts.init(echart.value)
  e.setOption(option)
})
</script>

<template>
  <div
    ref="echart"
    :style="{
      width: width + 'rem',
      height: height + 'rem'
    }"
  ></div>
</template>
